import React, { Component } from 'react'
import { Table,Row,Col,Button} from 'antd'
import styles from './manage.less'
import AddPizza from './addPizza'

export default class manage extends Component {
    state={
        menu:[]
    }
    //初始化menu
    componentDidMount(){
        fetch('./menu.json')
        .then(function(response){
            return response.json();
        })
        //这里有一个问题   修改menu的时候  需要绑定this   需要使用箭头函数  不然修改不了state的状态
        .then((data) => {
           //console.log(data);
           this.setState(()=>{
               const menu=[];
               for (const key in data){
                   menu.push({
                       key:key,
                       name:data[key].name
                   });
               }
               return {menu};
           })
        })
        .catch(function(e){
            console.log("获取请求失败");
        })
    }
    //渲染删除菜单
    renderMenuTable(){
        const columns=[{
            key:'name',
            title:'品种',
            dataIndex:'name'
        },
        {
            key:'action',
            title:'删除',
            render:(text,record)=>(
                <Button style={{border:'1px solid red'}} onClick={()=>handleDelete(record)}>
                    <span style={{color:'red'}}>x</span>
                </Button>
            )
        }];
        //菜单删除点击事件 功能没有实现
        //把数据的key值传过去，能实现删除
        const handleDelete=(record)=>{
            console.log(record.key);
        };
        const dataSource=[];
        return(
        <Table
        pagination={false}
        className='menuTable'
        dataSource={this.state.menu}
        columns={columns}
        locale={{
            emptyText:'菜单没有任何商品'
        }}>
        </Table>)
    }


    //渲染添加新的pizza
    renderAddPizza(){
        return <AddPizza></AddPizza>
    }

    render() {
        //console.log(this.state.menu);
        return (
            <Row className={styles.manage}>
                <Col sm={24} md={14} className={styles.left}>
                    {this.renderAddPizza()}
                </Col>
                <Col sm={24} md={8} className={styles.right}>
                    <h3>菜单</h3>
                    {this.renderMenuTable()}
                </Col>
            </Row>
        )
    }
}